<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>文档上传</title>
  <style>
    .form-group { margin-bottom: 1rem; }
    label { display: block; margin-bottom: .5rem; }
    select, input { padding: .375rem .75rem; }
  </style>
</head>
<body>
  <h2>上传文档</h2>
  <form id="uploadForm" enctype="multipart/form-data">
    <div class="form-group">
      <label for="file">选择文件：</label>
      <input type="file" id="file" name="file" required>
    </div>
    
    <div class="form-group">
      <label for="strategy">切分策略：</label>
      <select id="strategy" name="strategy">
        <option value="paragraph">段落分割</option>
        <option value="length">固定长度</option>
        <option value="sentence">句子分割</option>
        <option value="markdown">Markdown标题</option>
        <option value="sliding">滑动窗口</option>
      </select>
    </div>

    <div class="form-group">
      <label for="chunk_size">分块大小：</label>
      <input type="number" id="chunk_size" name="chunk_size" value="1000">
    </div>

    <div class="form-group">
      <label for="chunk_overlap">重叠大小：</label>
      <input type="number" id="chunk_overlap" name="chunk_overlap" value="200">
    </div>

    <button type="submit">上传</button>
  </form>
  <div id="result"></div>

  <script>
    document.getElementById('uploadForm').onsubmit = function(e) {
      e.preventDefault();
      
      const formData = new FormData();
      formData.append('file', document.getElementById('file').files[0]);
      formData.append('strategy', document.getElementById('strategy').value);
      formData.append('chunk_size', document.getElementById('chunk_size').value);
      formData.append('chunk_overlap', document.getElementById('chunk_overlap').value);

      fetch('http://localhost:5000/upload_document', {
        method: 'POST',
        body: formData
      })
      .then(response => response.json())
      .then(data => {
        if (data.error) {
          alert('上传失败: ' + data.error);
        } else {
          document.getElementById('result').innerHTML = `<pre>${JSON.stringify(data, null, 2)}</pre>`;
        }
      })
      .catch(error => {
        alert('上传失败: ' + error);
        document.getElementById('result').innerText = '上传出错: ' + error;
      });
    };
  </script>
</body>
</html>